<script setup>
import axios from "axios";

const orders = [
  {
    id: 1,
    orderId: 2001,
    subject: "牛排套餐",
    amount: "168",
    description: "牛排配薯条和蔬菜沙拉",
    image: "https://images.unsplash.com/photo-1558030006-450675393462?w=300&h=300&fit=crop",
    category: "主食"
  },
  {
    id: 2,
    orderId: 2002,
    subject: "寿司拼盘",
    amount: "128",
    description: "三文鱼寿司8个装送芥末酱油",
    image: "https://images.unsplash.com/photo-1579584425555-c3ce17fd4351?w=300&h=300&fit=crop",
    category: "日料"
  },
  {
    id: 3,
    orderId: 2003,
    subject: "玛格丽特披萨",
    amount: "88",
    description: "9寸薄底披萨，芝士拉丝",
    image: "https://images.unsplash.com/photo-1513104890138-7c749659a591?w=300&h=300&fit=crop",
    category: "西餐"
  }
];

const payWithAlipay = async (order) => {
  try {
    console.log('发起支付请求，商品信息:', order);
    const requestData = {
      orderId: order.orderId.toString(),
      subject: order.subject,
      amount: order.amount,
    };
    console.log('请求参数:', requestData);
    const res = await postRequest("http://127.0.0.1:8080/payment/pay", requestData);
    console.log('支付响应:', res);
    const div = document.createElement("div");
    div.innerHTML = res.data.data;
    document.body.appendChild(div);
    const form = div.getElementsByTagName("form")[0];
    if (form) {
      form.setAttribute('target', '_self');
      form.submit();
    } else {
      console.error('未找到支付表单');
    }
    div.remove();
  } catch (error) {
    console.error('支付失败:', error);
    console.error('错误详情:', error.response);
  }
};

const postRequest = (url, data) => {
  return axios({
    method: 'post',
    url: url,
    data: data,
  });
}
</script>

<template>
  <div class="container">
    <div class="header">
      <h1 class="title">美食商城</h1>
      <p class="subtitle">支持支付宝付款</p>
    </div>
    
    <div class="product-grid">
      <div 
        v-for="product in orders" 
        :key="product.id" 
        class="product-card"
      >
        <div class="product-image">
          <img :src="product.image" :alt="product.subject" />
          <div class="category-tag">{{ product.category }}</div>
        </div>
        
        <div class="product-info">
          <h3 class="product-title">{{ product.subject }}</h3>
          <p class="product-description">{{ product.description }}</p>
          
          <div class="product-footer">
            <div class="price-section">
              <span class="price">¥{{ parseInt(product.amount).toLocaleString() }}</span>
              <span class="order-id">订单号: {{ product.orderId }}</span>
            </div>
            
            <el-button 
              type="primary" 
              size="large"
              class="buy-button"
              @click="payWithAlipay(product)"
            >
              <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M7 4V2C7 1.45 7.45 1 8 1H16C16.55 1 17 1.45 17 2V4H20C20.55 4 21 4.45 21 5S20.55 6 20 6H19V19C19 20.1 18.1 21 17 21H7C5.9 21 5 20.1 5 19V6H4C3.45 6 3 5.55 3 5S3.45 4 4 4H7ZM9 3V4H15V3H9ZM7 6V19H17V6H7Z"/>
              </svg>
              立即购买
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.header {
  text-align: center;
  margin-bottom: 50px;
}

.title {
  font-size: 3rem;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 1.2rem;
  color: #666;
  font-weight: 400;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  padding: 20px 0;
}

.product-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
}

.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.product-image {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.category-tag {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #333;
}

.product-info {
  padding: 25px;
}

.product-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.3;
}

.product-description {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.price-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.price {
  font-size: 1.8rem;
  font-weight: 700;
  color: #e74c3c;
}

.order-id {
  font-size: 0.8rem;
  color: #999;
}

.buy-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: none !important;
  border-radius: 25px !important;
  padding: 12px 25px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.3s ease !important;
}

.buy-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4) !important;
}

.buy-button .icon {
  width: 18px;
  height: 18px;
}

@media (max-width: 768px) {
  .container {
    padding: 20px 15px;
  }
  
  .title {
    font-size: 2.2rem;
  }
  
  .product-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .product-footer {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .buy-button {
    width: 100% !important;
    justify-content: center !important;
  }
}
</style>